<script setup lang="ts">
import { ref } from 'vue';
import { Setting, Monitor, Link, Download, Tools } from '@element-plus/icons-vue';

const miniwin = () => {
    window.electron.ipcRenderer.send('miniwin');
}

// 添加打开调试工具的方法
const openDevTools = () => {
    // 打开开发者工具
    window.electron.ipcRenderer.send('open-devtools');
    // 显示 home.vue 中的 hiddenInputRef
    window.electron.ipcRenderer.send('show-hidden-input');
}

// 添加版本信息
const version = ref('1.0.0');
const updateTime = ref('2023-06-01');

// 添加系统信息获取
const systemInfo = ref({
    os: '加载中...',
    memory: '加载中...',
    cpu: '加载中...'
});

</script>

<template>
    <main class="othermain">
        <div class="settings-container">
            <div class="settings-header">
                <h1><el-icon><Setting /></el-icon> 系统设置</h1>
                <p>管理系统配置和访问外部资源</p>
            </div>
            
            <div class="settings-section">
                <h2>系统操作</h2>
                <div class="card-grid">
                    <div class="settings-card" @click="miniwin">
                        <el-icon class="card-icon"><Monitor /></el-icon>
                        <div class="card-content">
                            <h3>最小化</h3>
                            <p>将应用程序窗口最小化</p>
                        </div>
                    </div>
                    
                    <!-- 添加调试按钮 -->
                    <div class="settings-card" @click="openDevTools">
                        <el-icon class="card-icon"><Tools /></el-icon>
                        <div class="card-content">
                            <h3>调试工具</h3>
                            <p>打开开发者调试工具</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="settings-section">
                <h2>外部链接</h2>
                <div class="card-grid">
                    <!-- 现有外部链接保持不变 -->
                    <a class="settings-card" href="https://www.aiweijian.com/admin/" target="_blank" rel="noreferrer">
                        <el-icon class="card-icon"><Link /></el-icon>
                        <div class="card-content">
                            <h3>总后台</h3>
                            <p>访问系统管理总后台</p>
                        </div>
                    </a>
                    
                    <a class="settings-card" href="https://www.aiweijian.com/shop/" target="_blank" rel="noreferrer">
                        <el-icon class="card-icon"><Link /></el-icon>
                        <div class="card-content">
                            <h3>商户后台</h3>
                            <p>访问商户管理后台</p>
                        </div>
                    </a>
                    
                    <a class="settings-card" href="https://www.aiweijian.com/web/update.html" target="_blank" rel="noreferrer">
                        <el-icon class="card-icon"><Download /></el-icon>
                        <div class="card-content">
                            <h3>系统更新</h3>
                            <p>检查并下载最新版本</p>
                        </div>
                    </a>
                </div>
            </div>
            
            <!-- 其余部分保持不变 -->
            <div class="settings-section">
                <h2>系统信息</h2>
                <div class="info-card">
                    <div class="info-item">
                        <span class="info-label">当前版本:</span>
                        <span class="info-value">{{ version }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">更新日期:</span>
                        <span class="info-value">{{ updateTime }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">操作系统:</span>
                        <span class="info-value">{{ systemInfo.os }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">内存使用:</span>
                        <span class="info-value">{{ systemInfo.memory }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">处理器:</span>
                        <span class="info-value">{{ systemInfo.cpu }}</span>
                    </div>
                </div>
            </div>
            
            <div class="settings-footer">
                <p>八臻八戒收银系统 &copy; 2025</p>
            </div>
        </div>
    </main>
</template>

<style lang="scss" scoped>
.othermain {
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: #f5f7fa;
    overflow: auto;
    
    .settings-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .settings-header {
        margin-bottom: 30px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e4e7ed;
        
        h1 {
            font-size: 24px;
            color: #303133;
            margin: 0 0 10px 0;
            display: flex;
            align-items: center;
            
            .el-icon {
                margin-right: 10px;
                font-size: 24px;
                color: #409EFF;
            }
        }
        
        p {
            color: #606266;
            margin: 0;
        }
    }
    
    .settings-section {
        margin-bottom: 30px;
        
        h2 {
            font-size: 18px;
            color: #303133;
            margin: 0 0 15px 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #ebeef5;
        }
    }
    
    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
    
    .settings-card {
        display: flex;
        align-items: center;
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        
        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        }
        
        .card-icon {
            font-size: 24px;
            color: #409EFF;
            margin-right: 15px;
            padding: 10px;
            background-color: rgba(64, 158, 255, 0.1);
            border-radius: 8px;
        }
        
        .card-content {
            flex: 1;
            
            h3 {
                font-size: 16px;
                margin: 0 0 5px 0;
                color: #303133;
            }
            
            p {
                font-size: 14px;
                margin: 0;
                color: #606266;
            }
        }
    }
    
    .info-card {
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        
        .info-item {
            display: flex;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f2f5;
            
            &:last-child {
                margin-bottom: 0;
                padding-bottom: 0;
                border-bottom: none;
            }
            
            .info-label {
                width: 100px;
                color: #606266;
                font-weight: 500;
            }
            
            .info-value {
                flex: 1;
                color: #303133;
            }
        }
    }
    
    .settings-footer {
        text-align: center;
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #e4e7ed;
        
        p {
            color: #909399;
            font-size: 14px;
        }
    }
}
</style>